<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
        table td{
            border:1px solid #000;
            padding:3px;
        }
        #app{
            margin: 50px 300px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{title}} </h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选中</td>
                    <td>名称</td>
                    <td>描述</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody> 
                <tr v-for="(v,i) in goods" :key="i">
                    <td>{{i+1}} </td>
                    <td><input type="checkbox" v-model="v.check"></td>
                    <td>{{v.title}} </td>
                    <td><img :src="imgSrc" width="100" height="50"></td>
                    <td>{{v.price}} </td>
                    <td><input type="number" v-model="v.count"></td>
                    <td>{{v.price * v.count}}</td>
                    <td><button @click="goods.splice(i,1)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div>
            <p>
                <label for="">全选反选</label>
                <input type="checkbox" id="check" v-model="quan">
            </p>

            <p>
                <button @click="delecheck">删除选中</button>
            </p>

            <p>
                选中数量: {{count}} / 总数量: {{allCount}}
            </p>
            <p>
                选中价值: {{price}} / 总价值: {{allPrice}}
            </p>
        </div>

    </div>




    <script>


        const vm = new Vue({
            data:{
                title:"v-model 实现简易的购物车",
                goods:[
                    {check:false,title:"上衣",price:200,count:10},
                    {check:true,title:"裤子",price:100,count:10},
                    {check:false,title:"鞋子",price:500,count:10},
                    {check:false,title:"风衣",price:1000,count:10},
                    {check:true,title:"帽子",price:300,count:10},
                    {check:true,title:"西服",price:2000,count:10},  
                ],
                imgSrc:'../../../../h_2114/h_2114_me/day028/upload1/img.png',

            },
            computed:{
                quan:{
                    get(){
                        return this.goods.length?this.goods.filter(item=>item.check).length == this.goods.length:false
                    },
                    set(v){
                        return this.goods.map(item=>item.check = v);
                    }
                },
                count(){
                    var num = 0;
                    this.goods.map(item=>{
                        if(item.check){
                            num += item.count * 1
                        }
                        })
                        return num
                },
                price(){
                    var prices = 0 ;
                    this.goods.map(item=>{
                        if(item.check){
                            prices += item.price * item.count
                        }
                    })
                    return prices
                },
                allCount(){
                    let num = 0 ;
                     this.goods.map(item=>{
                         num+=item.count * 1
                    })
                    return num
                },
                allPrice(){
                    var prices = 0 ;
                    this.goods.map(item=>{
                        prices += item.price * item.count
                        
                    })
                    return prices
                }

            },
            methods:{
                delecheck(){
                   this.goods = this.goods.filter(item=>!item.check) 
                }

            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title
            },

        }).$mount('#app')
    </script>
</body>
</html>